<template>
  <view class="settings-page">
    <view class="hero">
      <view class="title">设置</view>
      <view class="subtle">管理账户与应用偏好</view>
    </view>

    <view class="group card">
      <view class="cell" @tap="goAbout">
        <text>关于我们</text>
        <text class="arrow">›</text>
      </view>
      <view class="cell" @tap="clearCache">
        <view>
          <text>清理缓存</text>
          <text class="sub">释放存储空间</text>
        </view>
      </view>
    </view>

    <view class="group card">
      <view class="cell only">
        <uv-button type="error" shape="circle" @tap="logout">退出登录</uv-button>
      </view>
    </view>

    <view class="version">版本 v1.0.0</view>
  </view>
  
</template>

<script setup>
// 中文注释：设置页面
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const goAbout = () => proxy?.$navigateTo?.('/pages/user/about')

const clearCache = () => {
  try {
    uni.clearStorageSync()
    uni.showToast({ title: '已清理', icon: 'none' })
  } catch (e) {}
}

const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 示例：仅清理本地登录状态
        uni.removeStorageSync('token')
        uni.showToast({ title: '已退出', icon: 'none' })
        setTimeout(() => uni.switchTab({ url: '/pages/user/center' }), 400)
      }
    }
  })
}
</script>

<style scoped lang="scss">
.settings-page { padding: 16rpx; min-height: 100vh; background: $uni-bg-color-grey; }
.hero { padding: 8rpx 8rpx 16rpx; }
.title { font-size: 36rpx; font-weight: 700; color: #1f2d3d; }
.group { margin-top: 20rpx; border-radius: 16rpx; overflow: hidden; }
.card { background: #fff; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.cell { display: flex; justify-content: space-between; align-items: center; padding: 28rpx 24rpx; border-bottom: 1rpx solid $uni-border-color; }
.cell:last-child { border-bottom: none; }
.cell.only { justify-content: center; }
.arrow { color: #ccc; }
.sub { display: block; color: #999; font-size: 24rpx; margin-top: 6rpx; }
.version { text-align: center; color: #999; font-size: 24rpx; margin-top: 40rpx; }
</style>
